<template>
	<view>
		<view class="search">
			<image @tap="back" class="search-img" src="../../static/images/card-shouye/u586.png" mode=""></image>
			<view class="search-box">
				<input class="search-ipt" type="text" value="" placeholder="搜索旅游地" />
			</view>
		</view>
		<view class="load-box">
			<view class="load-list">
				<view class="load-list-item" @click="curId = 0" :class="{on: curId == 0}">
					<text class="load-list-list">亚洲</text>
				</view>
				<view class="load-list-item" @click="curId = 1" :class="{on: curId == 1}">
					<text class="load-list-list">欧洲</text>
				</view>
				<view class="load-list-item" @click="curId = 2" :class="{on: curId == 2}">
					<text class="load-list-list">北美洲</text>
				</view>
			</view>
			<view class="load-show">
				<view class="load-show-iitem" v-show="curId == 0">
					<text class="title">亚洲游</text>
					<view class="recommend-list">
						<navigator class="recommend-item" @click="jumprecommend" v-for="(item, index) in recommend"
							:key="index">
							<image :src="item.url" class="recommend-img"></image>
							<text class="recommend-txt">{{item.name}}</text>
						</navigator>
					</view>
				</view>
				<view v-show="curId == 1">
					<text class="title">欧洲游</text>
				</view>
				<view v-show="curId == 2">
					<text class="title">北美洲游</text>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				curId: 0,
				recommend: [{
						name: "普吉岛",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/02.png?sign=7c120fb70a15ada43db3b8f30f121db9&t=1637725999"

					},
					{
						name: "济州岛",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/03.png?sign=131bcc020e5be87c6eca3388b62c9220&t=1637738230"

					},
					{
						name: "马尔代夫",
						url: "cloud://cloud1-9g758w5e086d6c42.636c-cloud1-9g758w5e086d6c42-1308394358/card/carshouye/image_u307.png"

					},
					{
						name: "马尔代夫",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/02.png?sign=7c120fb70a15ada43db3b8f30f121db9&t=1637725999"

					},
					{
						name: "普吉岛",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/02.png?sign=7c120fb70a15ada43db3b8f30f121db9&t=1637725999"

					},
					{
						name: "济州岛",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/03.png?sign=131bcc020e5be87c6eca3388b62c9220&t=1637738230"

					},
					{
						name: "马尔代夫",
						url: "cloud://cloud1-9g758w5e086d6c42.636c-cloud1-9g758w5e086d6c42-1308394358/card/carshouye/image_u307.png"

					},
					{
						name: "马尔代夫",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/02.png?sign=7c120fb70a15ada43db3b8f30f121db9&t=1637725999"

					},
					{
						name: "普吉岛",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/02.png?sign=7c120fb70a15ada43db3b8f30f121db9&t=1637725999"

					},
					{
						name: "济州岛",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/03.png?sign=131bcc020e5be87c6eca3388b62c9220&t=1637738230"

					},
					{
						name: "马尔代夫",
						url: "cloud://cloud1-9g758w5e086d6c42.636c-cloud1-9g758w5e086d6c42-1308394358/card/carshouye/image_u307.png"

					},
					{
						name: "马尔代夫",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/02.png?sign=7c120fb70a15ada43db3b8f30f121db9&t=1637725999"

					}
				],
			}
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		margin: 20rpx 0;
		width: 750rpx;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-img {
		width: 20rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}

	.search-box {
		display: flex;
		align-items: center;
		width: 650rpx;
		border-radius: 40rpx;
		height: 60rpx;
		background-color: #f7f7f7;
	}

	.search-ipt {
		padding-left: 20rpx;
		width: 630rpx;
		height: 50rpx;
	}

	.load-box {
		width: 750rpx;
		height: 100vh;
		display: flex;
		justify-content: flex-start;

		.load-list {
			width: 150rpx;
			height: 100vh;
			background-color: #FFFFFF;

			.load-list-item {
				width: 150rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-left: 10rpx solid #FFFFFF
			}

			.on {
				color: #3e64ff;
				border-left: 10rpx solid #3e64ff;
			}
		}

		.load-show {
			width: 600rpx;
			height: 100vh;
			text-align: center;

			.title {
				color: #3e64ff;
				margin: 20rpx 0;
				font-size: 50rpx;
				border-bottom: 5rpx solid #3e64ff;

			}
		}
	}

	.recommend-list {
		margin-top: 20rpx;
		width: 600rpx;
		justify-content: space-around;
		display: flex;
		flex-wrap: wrap;
	}

	.recommend-item {
		position: relative;
		width: 256rpx;
		height: 144rpx;
		border-radius: 20rpx;
		margin: 10rpx 0;
	}

	.recommend-img {
		width: 256rpx;
		height: 144rpx;
	}

	.recommend-txt {
		position: absolute;
		left: 85rpx;
		top: 43rpx;
		height: 40rpx;
		font-style: normal;
		font-size: 12px;
		color: #FFFFFF;
		line-height: 20px;
	}
</style>
